<template>
    <el-card>
        <el-form :model="queryParams" ref="queryParams" :inline="true" label-width="100px">
            <el-form-item label="菜单名称：" prop="name">
                 <el-input v-model="queryParams.name" placeholder="菜单名称" size="small"></el-input>
            </el-form-item>
            <el-form-item label="菜单编号：" prop="code">
                <el-input v-model="queryParams.code" placeholder="菜单编号" size="small"></el-input>
            </el-form-item>
             <el-form-item label="菜单别名：" prop="alias">
                <el-input v-model="queryParams.alias" placeholder="菜单别名" size="small"></el-input>
            </el-form-item>
            <el-form-item >
                <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-delete" size="small" @click="resetQuery('queryParams')">清空</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10">
            <el-col :span="24">
                <div style="margin-bottom: 10px">
                    <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd">新增</el-button>
                    <el-button type="danger" plain icon="el-icon-delete" size="small" @click="handleDelete($refs.tableRef.selection)">删除</el-button>
                </div>
            </el-col>
        </el-row>
        <el-table :data="tableData" ref="tableRef" style="width: 100%" row-key="id" border lazy :load="load" size="small" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column type="index" label="#" width="50"></el-table-column>
            <el-table-column prop="name" label="菜单名称"></el-table-column>
            <el-table-column prop="path" label="路由地址"></el-table-column>
            <el-table-column prop="source" label="菜单图标" width="250"></el-table-column>
            <el-table-column prop="code" label="菜单编号" width="100"></el-table-column>
            <el-table-column prop="alias" label="菜单别名" width="100"></el-table-column>
            <el-table-column prop="sort" label="菜单排序" width="100"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row.id)">删除</el-button>
                    <el-button size="mini" type="text" icon="el-icon-circle-plus-outline" @click="handleSubAdd(scope.row)">新增子项</el-button>
                </template>
        </el-table-column>
        </el-table>
         <el-dialog :title="formTitle" :visible.sync="menuModal" width="50%">
        <el-form :model="menuForm" :rules="menuRules" ref="menuForm" :disabled="mode==='view'">
                <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item  prop="name" label="菜单名称：" :label-width="formLabelWidth" required>
                        <el-input v-model="menuForm.name" autocomplete="off" size="mini" placeholder="请输入菜单名称"></el-input>
                    </el-form-item>
                    </el-col>
                    <el-col :span="12">
                    <el-form-item  prop="path" label="路由地址：" :label-width="formLabelWidth" required>
                        <el-input v-model="menuForm.path" autocomplete="off" size="mini" placeholder="请输入路由地址"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
                <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item  prop="parentId" label="上级菜单：" :label-width="formLabelWidth">
                        <el-select v-model="menuForm.parentId" placeholder="请选择上级菜单" size="mini" :disabled="mode==='subAdd'">
                            <el-option :value="parentValue" :label="parentLabel" style="height: auto">
                                <el-input
                                    placeholder="输入关键字进行过滤"
                                    size="mini"
                                    v-model="filterText">
                                </el-input>
                                <el-tree :data="menuTreeData" @node-click="handleNodeClick"></el-tree>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    </el-col>
                <el-col :span="12">
                    <el-form-item  prop="source" label="菜单图标：" :label-width="formLabelWidth" required>
                        <el-input v-model="menuForm.source" autocomplete="off" size="mini" placeholder="请输入菜单图标"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
                <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item  prop="code" label="菜单编号：" :label-width="formLabelWidth" required>
                        <el-input v-model="menuForm.code" autocomplete="off" size="mini" placeholder="请输入菜单编号"></el-input>
                    </el-form-item>
                    </el-col>
                <el-col :span="12">
                    <el-form-item  prop="category" label="菜单类型：" :label-width="formLabelWidth" required>
                            <el-radio-group v-model="menuForm.category">
                                <el-radio v-for="(item,index) in categoryArr" :key="index" :label="item.value">{{item.label}}</el-radio>
                            </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
                <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item  prop="alias" label="菜单别名：" :label-width="formLabelWidth" required>
                        <el-input v-model="menuForm.alias" autocomplete="off" size="mini" placeholder="请输入菜单别名"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item  prop="sort" label="菜单排序：" :label-width="formLabelWidth" required>
                        <el-input v-model="menuForm.sort" autocomplete="off" size="mini" placeholder="请输入菜单排序"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
                <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item  prop="remark" label="菜单备注：" :label-width="formLabelWidth">
                        <el-input v-model="menuForm.remark" type="textarea" autocomplete="off" size="mini" placeholder="请输入菜单备注"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer" v-if="mode!=='view'">
            <el-button type="primary" @click="handleSubmit('menuForm')" size="small">保存</el-button>
            <el-button size="small" @click="handleCancel">取消</el-button>
        </div>
         </el-dialog>
        <!-- <el-dialog title="请选择菜单图标" width="50%" :visible.sync="iconDialog">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="通用图标" name="first">通用图标</el-tab-pane>
                <el-tab-pane label="系统图标" name="second">系统图标</el-tab-pane>
            </el-tabs>
        </el-dialog> -->
    </el-card>
</template>
<script>
import {getMenuList,getMenuTree,saveMenu,getMenuDetail,remove} from '@/api/system/menu.api.js'
    export default {
        data() {
            return {
                 queryParams: {
                     parentId: undefined
                 },
                 tableData: [],
                 total: 0,
                 menuModal: false,
                 menuForm: {},
                 formLabelWidth: "100px",
                 menuRules: {
                     name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' },],
                     path: [{ required: true, message: '请输入路由地址', trigger: 'blur' },],
                     source: [{ required: true, message: '请输入菜单图标', trigger: 'blur' },],
                     code: [{ required: true, message: '请输入菜单编号', trigger: 'blur' },],
                     category: [{ required: true, message: '请选择菜单类型', trigger: 'blur' },],
                     alias: [{ required: true, message: '请输入菜单别名', trigger: 'blur' },],
                     sort: [{ required: true, message: '请输入菜单排序', trigger: 'blur' },],
                 },
                 menuTreeData: [],
                 parentValue: '',
                 parentLabel: '',
                 filterText: '',
                 iconDialog: false,
                 categoryArr: [
                     {label: '菜单',value: 1},
                     {label: '按钮',value: 2},
                 ],
                 // 添加模式
                 mode: 'add',
                 formTitle: '新增'
            }
        },
        mounted() {
            this.getList();
        },
        methods: {
            handleMenuIcon() {
                this.iconDialog = true;
            },
            handleSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                if (valid) {
                     this.menuForm.$parentId = this.parentLabel;
                     this.menuForm.$category  = this.categoryArr.find(item=>item.value===this.menuForm.category).label
                     console.log(this.menuForm);
                     saveMenu(this.menuForm).then(res=>{
                        if(res.code === 200) {
                             this.$refs['menuForm'].resetFields();
                                this.$message({
                                    message: '保存成功',
                                    type: 'success'
                                });
                            this.menuModal = false;
                            this.getList();
                        }
                    })
                } else {
                    return false;
                }
              });
            },
            // 编辑
            async handleEdit(row) {
                this.getMenuInfo(row.id);
                this.mode = 'edit';
                this.menuModal = true;
                this.formTitle = '编辑'
            },
            // 查看
            async handleView(row) {
                this.getMenuInfo(row.id);
                this.mode = 'view';
                this.menuModal = true;
                this.formTitle = '查看'
            },
            async handleAdd() {
                this.$refs['menuForm'] && this.$refs['menuForm'].resetFields();
                this.formTitle = '新增';
                this.mode = 'add';
                this.menuModal = true;
                const result = await getMenuTree();
                if(result.code === 200) {
                    this.menuTreeData = this.getTreeNode(result.data)
                }
            },
            // 新增子项
            handleSubAdd(row) {
                this.menuForm.parentId = row.id;
                this.parentLabel = row.name;
                this.parentValue = row.id;
                this.mode = 'subAdd';
                this.menuModal = true;
                this.formTitle = '新增'
            },
            async getMenuInfo(id) {
                 const result = await getMenuDetail(id)
                if(result.code === 200) {
                    this.menuForm = result.data;
                    this.parentLabel = result.data.parentName;
                    this.parentValue = result.data.parentId;
                }
            },
             handleDelete(ids) {
                let menuIds;
                typeof ids === 'string'?menuIds=ids:menuIds=ids.map(item=>item.id).toString();
                if(menuIds.length===0) {
                    this.$message({
                        type: 'error',
                        message: '请至少选择一条数据'
                    })
                    return;
                }
                this.$confirm('确定将选择的数据删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(async () => {
                        const result = await remove(menuIds);
                        if(result.code === 200) {
                             this.$message({
                                type: 'success',
                                message: '删除成功!'
                           });
                          this.getList();
                        }
                    }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
            getList() {
                this.queryParams.parentId = 0;
                getMenuList(this.queryParams).then(res=>{
                    if(res.code === 200) {
                        this.tableData = res.data;
                    }
                })
            },
             // 搜索
            handleQuery() {
                this.getList();
            },
            // 清空
            resetQuery(formName) {
                this.$refs[formName].resetFields();
                this.getList();
            },
            load(tree, treeNode, resolve) {
                const params = {parentId: tree.id}
                getMenuList(params).then(res=>{
                    const {data} = res
                    if(data.code === 200) {
                        resolve(data.data)
                    }
                })
            },
          
            handleCancel() {

            },
            handleNodeClick(data) {
                this.menuForm.parentId = data.id;
                this.parentValue = data.id;
                this.parentLabel = data.label
             },
            getTreeNode(data) {
                data.forEach(item => {
                    item.label = item.title;
                    if(item.hasChildren) {
                        this.getTreeNode(item.children);
                    }
                });
                return data;
            },
        },
    }
</script>

<style lang="scss" scoped>
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
    background-color: #fff;
}
</style>